<template>
    <div class="types">
        <h2>分类浏览</h2>
        <div class="content">
            <ul class="typelist">
                <li v-for="item in items" :key="item.id">
                    <a :href="baseUrl + item.href">
                        {{item.title}}
                    </a>
                    <i></i>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "Types",
    data() {
        return {
            baseUrl: "https://m.douban.com/",
            items: [
                {
                title: "经典",
                href: "movie/classic"
                },
                {
                title: "冷门佳片",
                href: "movie/underrated"
                },
                {
                title: "豆瓣高分",
                href: "movie/doubantop"
                },
                {
                title: "动作",
                href: "movie/action"
                },
                {
                title: "喜剧",
                href: "movie/comedy"
                },
                {
                title: "爱情",
                href: "movie/love"
                },
                {
                title: "悬疑",
                href: "movie/mystery"
                },
                {
                title: "恐怖",
                href: "movie/horror"
                },
                {
                title: "科幻",
                href: "movie/scifi"
                },
                {
                title: "治愈",
                href: "movie/sweet"
                },
                {
                title: "文艺",
                href: "movie/artfilm"
                },
                {
                title: "成长",
                href: "movie/youth"
                },
                {
                title: "动画",
                href: "movie/animation"
                },
                {
                title: "华语",
                href: "movie/chinese"
                },
                {
                title: "欧美",
                href: "movie/western"
                },
                {
                title: "韩国",
                href: "movie/korean"
                },
                {
                title: "日本",
                href: "movie/japanese"
                }
            ]
        }
    }
};
</script>

<style lang="scss" scoped>
.types {
    margin-top: 1rem;
    
    h2 {
        height: 2.6rem;
        line-height: 2.6rem;
        padding: 0 1.6rem;
        display: inline-block;
    }
}
.typelist {
    margin: 1.6rem 0 01.6rem;
    overflow: hidden;

    li {
        box-sizing: border-box;
        width: 50%;
        padding-right: 1.8rem;
        padding-left: 1rem;
        height: 4.2rem;
        line-height: 4.2rem;
        font-size: 1.6rem;
        border-top: solid 0.1rem #eee;
        border-right: solid 0.1rem #eee;
        float: left;

        a {
            color: #42bd56;
        }
        
        i {
            display: inline-block;
            width: 0.8rem;
            height: 0.8rem;
            border-right: solid 0.1rem #ccc;
            border-bottom: solid 0.1rem #ccc;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            float: right;
            margin-top: 1.5rem;
        }
    }
}
</style>
